<template>
	<view class="timer-irrigation">
		<intel-irri-model-header class="timer-header" name="定时灌溉" :state="state"></intel-irri-model-header>
		<view class="uni-flex uni-row param">
			<text class="lable">灌溉时长:</text>
			<view class="setting">
				<text class="text">{{hour}}</text> 时
				<text class="text">{{minute}}</text> 分
				<!-- <text>{{second}}</text> 秒 -->
			</view>
		</view>
		<view class="operation">
			<button class="button start" type="default" @click="start">启动</button>
			<button class="button add" type="default" @click="add">添加到轮灌+</button>
		</view>
	</view>
</template>

<script>
	import intelIrriModelHeader from './intel-irri-model-header.vue'
	export default{
		data() {
			return {
			}
		},
		methods:{
			start(){
				this.$emit('start')
			},
			add(){
				this.$emit('add')
			}
		},
		components:{
			intelIrriModelHeader
		},
		props:{
			state: {
				type: Boolean,
				required: true
			},
			hour: {
				type: Number,
				required: true
			},
			minute: {
				type: Number,
				required: true
			}
		}
	}
</script>

<style lang="scss" scoped>
.timer-irrigation{
	// width: 612.94rpx;
	// height: 267.05rpx;
	background: #D4EEEA;
	border-radius: 10px;
	box-sizing: border-box;
	padding: 11.76rpx 0 16.47rpx 21.17rpx;
	.timer-header{
		
	}
	.param{
		margin: 47.05rpx 0 35.29rpx;
		align-items: center;
		.lable{
			margin: 0 29.41rpx 0 11.76rpx;
			font-size: 21.17rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #1D786C;
			letter-spacing: 0.3em;
		}
		.setting{
			font-size: 30.58rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #1D786C;
			
			.text{
				margin: 0 11.76rpx;
			}
		}
	}
	.operation{
		text-align: right;
		.button{
			display: inline-block;
			background: #1D786C;
			border-radius: 11.76rpx;
			
			font-size: 29.41rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #FFFFFF;
		}
		.start{
			// width: 135.29rpx;
		}
		.add{
			margin: 0 23.52rpx 0 37.64rpx;
			// width: 176.47rpx;
		}
	}
}
</style>
